<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Scale Example</title>
</head>

<body>
    <button id="zoomIn">放大</button>
    <button id="zoomOut">缩小</button>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');
        let scale = 1.0;

        function draw() {
            // 清除 canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

            // 保存当前绘图状态
            context.save();

            // 设置缩放比例
            context.scale(scale, scale);

            // 绘制内容
            context.fillStyle = 'blue';
            context.fillRect(50, 50, 100, 100);

            // 恢复绘图状态
            context.restore();

            // 继续绘制其他内容，不受缩放影响
            context.fillStyle = 'red';
            context.fillRect(200, 200, 100, 100);
        }

        document.getElementById('zoomIn').addEventListener('click', function () {
            scale *= 1.1; // 每次放大 10%
            draw();
        });

        document.getElementById('zoomOut').addEventListener('click', function () {
            scale *= 0.9; // 每次缩小 10%
            draw();
        });

        // 初始绘制
        draw();
    </script>
</body>

</html>